<template>
    <section class="watchSection">
        <layout :isVertical="true" v-loading="loading">
            <common-toolbar text="账号设置">
            </common-toolbar>
            <layout layout="center"  class="centerSection noScrollSection">
            <p class="p">请填写以下信息：</p>
            <el-divider></el-divider>
            <el-form ref="ruleForm" :model="formName" label-width="140px" :rules="rules">
            <el-form-item label="总部名称" prop="headquartersName">
                <el-input v-model="formName.headquartersName" disabled placeholder="请输入总部名称"></el-input>
            </el-form-item>
            <div class="leftData" style="display: inline-flex;width: 100%;">

                <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="formName.contacts"  placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="number">
                    <el-input v-model="formName.number"  placeholder="请输入联系方式" maxlength="11"></el-input>
                </el-form-item>
               
            </div>
             <div class="leftData" style="display: inline-flex;width: 100%;">
                 <el-form-item label="联系邮箱" prop="email">
                   <el-input v-model="formName.email" placeholder="请输入联系邮箱"></el-input>
                </el-form-item>
                <el-form-item label="对应广告商" prop="holderCode">
                    <el-select v-model="formName.holderCode" placeholder="请选择对应广告商">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.holderCnName"
                        :value="item.holderEnName">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="leftData" style="display: inline-flex;width: 100%;">
                 <el-form-item label="管理员用户名" prop="adminUsername">
                   <el-input v-model="formName.adminUsername" disabled placeholder="请输入管理员用户名"></el-input>
                </el-form-item>
                <el-form-item>
                   <el-button type="primary" @click="savePasword">重置密码</el-button>
                </el-form-item>
            </div>
           
             <el-form-item style="margin-top:22px">
                <el-button type="primary" @click="save('ruleForm')">保存</el-button>
            </el-form-item>
</el-form>
            
            </layout>
        </layout>
        <el-dialog
                title="筛选"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="影院名称">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker
                                v-model="form.date"
                                type="daterange"
                                range-separator="至"
                                size="small"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Service from './userManagement.service';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
import {
  checkMail,
  checkPhone,
} from "@/utils/validate";
@Component
export default class cinemaShowLog extends Vue{
    height = 500;
    windowHeight = 700;
    loading = false;
    data = [];
    onlyShowError = false;
    total = 0;
    page = 1;
    pageSize = 30;
    cinemaName = '';
    cinemaCode = '';
    value='';
    input ='';
    dialogVisible = false;
    form = {
        name: '',
        code: '',
        date : ''
    };
    formName = {}
    rules={
          headquartersName: [
            { required: true, message: '请输入总部名称', trigger: 'blur' }
          ],
          holderCode: [
            { required: true, message: '请选择对应广告商', trigger: 'change' }
          ],
          contacts: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          number: [
            {required: true, message: '请输入有效的联系方式', trigger: 'blur' },
             { validator: checkPhone, trigger: "blur" },
          ],
          email:[{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur',
        },{ validator: checkMail, trigger: "blur" },],
          adminUsername: [
            { required: true, message: '请输入管理员用户名', trigger: 'blur' }
          ],
          adminPassword: [
            { required: true, message: '请输入管理员密码', trigger: 'blur' }
          ]
      };
    options=[];
    constructor(){
        super();

    };
    // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
    searchErrorList(){
        this.onlyShowError = true;
    }

    searchAllList(){
        this.onlyShowError = false;
    }


    handleSizeChange(val) {
        this.pageSize = val;
    }

    handleCurrentChange(val) {
        this.page = val;
    }

    showDetail(){

    }
    back(): void {
        this.$router.go(-1);
    }
    savePasword() {
         Service.resetPwd({userName:this.formName.adminUsername}).then(res=>{
            if(res.data.succeeded) {
                    this['$message']({
                    message: '重置密码成功',
                    type: 'success'
                });
            }else {
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    }
    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    }

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }
    save(formName) {
        //console.log(this.value)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.creationAdmin()
           
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
        // if(this.formName&&this.input!='') {

        // } else {
        //     return  this['$message']({
        //               message: '请填写以下信息',
        //               type: 'warning'
        //           });
        // }
    }
    resetForm(ruleForm) {
        this.formName = Object.assign({});
    }
    creationAdmin() {
        let data = {
            headquartersName:this.formName.headquartersName,
            holderCode:this.formName.holderCode,
            contacts:this.formName.contacts,
            number:this.formName.number,
            adminUsername:this.formName.adminUsername,
            email :this.formName.email ,
            id:this.formName.id ,
            headquartersCode:this.formName.headquartersCode,
            // adminPassword:this.formName.number,
        }
        Service.updateInfo(data).then(res=>{
            if(res.data.succeeded) {
                    this['$message']({
                    message: '保存成功',
                    type: 'success'
                });
                this.back()
            }else {
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    }
    created(){
        const me = this;
        this.resizeEvent();
        this.formName = JSON.parse(window.localStorage.getItem('headquartersCode'))
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
    };
    holderList() {
        this.loading = true;
        Service.holderList().then(res=>{
            //console.log(res)
            if (res.data.succeeded == true) {
                this.loading = false;
                this.options = res.data.data;
                for(let item of res.data.data) {
                    if(item.holderEnName == this.formName.holderCode) {
                        this.formName.holderCode = item.holderCnName
                    }
                }
            } else {
                this.loading = false;
            }
            //console.log(this.options)
        })
    }
    mounted(){
        this.holderList();
    };

}
</script>
<style lang="scss" scoped>
    // @import '../../styles/login.scss';
.el-row {
    line-height: 40px;
    margin: 10px;
}
.bg-purple {
    text-align: center;
}
.el-select {
    width: 100%;
}
.p {
    font-family: SourceHanSansSC;
    font-weight: 700;
    font-size: 18px;
    color: rgba(25, 39, 48, 0.57);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 26px;
    text-decoration: none;
    margin-left: 92px;
}
.el-col-12 {
    text-align: center;
}
/deep/ .el-divider--horizontal{
    margin: 10px 0;
}
.leftData {
    width: 100%;
    /deep/
    .el-form-item {
        width: 50%;
    }
}
 /deep/
    .el-form-item {
        margin-bottom: 10px !important;
    }
</style>